<template>
  <!--我的统计-->
  <div id="myEcharts">
    <div id="main" style="width: 500px;height:400px;display: inline-block;margin-right: 20px"></div>
    <div id="main2" style="width: 500px;height:400px;display: inline-block;float: right"></div>
  </div>
</template>

<script>
  import {queryCourseHoursStatistics,queryIntegralStatistics,} from '@/request/api'
  export default {
    data () {
      return {
        dataX1: ["水环境","大气环境","环境安全","环境教育"],
        dataY1: [0,0,0,0],
        datas: [
          {value: 0, name: '水环境'},
          {value: 0, name: '大气环境'},
          {value: 0, name: '环境安全'},
          {value: 0, name: '环境教育'},
          {value: 0, name: '视频资料'},
          {value: 0, name: '文字资料'},
        ]
      }
    },
    created() {
      this.getList1()
      this.getList2()
    },
    mounted() {

    },
    methods: {
      getList1() {
        const loading = this.openLoading();
        var params = {
            "userId": JSON.parse(localStorage.getItem('userInfo')).id
        }
        queryCourseHoursStatistics(params).then(res=> {
          if(res.code == 200) {
            if(res.data.length==0) {
              this.open1(this.dataX1,this.dataY1)
            }else {
                var dataX1 = []
                var dataY1 = []
                res.data.forEach(e=> {
                  dataX1.push(e.name)
                  dataY1.push(e.value)
                })
              this.open1(dataX1,dataY1)
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      getList2() {
        const loading = this.openLoading();
        var params = {
          "userId": JSON.parse(localStorage.getItem('userInfo')).id
        }
        queryIntegralStatistics(params).then(res=> {
          if(res.code == 200) {
            if(res.data.length==0) {
              this.open2(this.datas)
            }else {
              this.open2(res.data)
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
        open1(dataX1,dataY1) {
          var echarts = require('echarts');
          // 基于准备好的dom，初始化echarts实例
          var myChart1 = echarts.init(document.getElementById('main'));

          // 指定图表的配置项和数据
          var option1 = {
            title: {
              text: '我的各类别课程学时统计'
            },
            tooltip: {},
            legend: {
              data:['数量']
            },
            xAxis: {
              data: dataX1
            },
            yAxis: {},
            series: [{
              name: '数量',
              type: 'bar',
              data: dataY1
            }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart1.setOption(option1);
        },
      open2(datas) {
        var echarts = require('echarts');
        var myChart2 = echarts.init(document.getElementById('main2'));
        // 指定图表的配置项和数据
        var option2 = {
          title: {
            text: '我的各类积分占比',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical', //纵向图例
            left: 'left',
            textStyle: {
              color: '#000',
              fontSize: 14
            }
          },
          series: [
            {
              name: '合格率',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: datas,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
      }
    }
  }
</script>

<style scoped>
  #myEcharts {
    width: 1200px;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    background:#fff;
    margin-bottom:60px;
  }
</style>
